<template>
  <div class="search" 
      :height="height" 
      :width="width">
      <input :placeholder="placeholder" 
            :type="type" 
            :name="name">
        <i class="el-icon-search" @click="$emit('click')"></i>
  </div>
</template>

<script>
export default {
    props:['placeholder', 'width', 'height', 'type', 'name'],
    date(){
        return{
            
        }
    }
}
</script>

<style lang="css" scoped>

@keyframes move{
    from {right:0px;}
    to {left:0px;}
}

.search{
    position: relative;
    top: -20px;
    min-width: 200px;
    width: 100px;
    padding: 5px;
    height: 20px;
    width: 100%;
}

.search *{
    position: absolute;
    margin: 0px;
    padding: 0px;
    border: none;
    outline: none;
    height: inherit;
}

.search :first-child{
    width: 70%;
    left: 0;
}

.search :last-child{
    width: 30%;
    right: 0;
    cursor: pointer;
}


</style>